<template>
    <div class="header-box">
        <img :src="src">
        <p>{{title}}</p>
        <div class="nav">
            <div class="item flex_center" @click="to(item.url)" :class="item.url==path?'active':''"
                v-for="(item,index) in navs" :key="index">
                <img :src="item.img" alt="" class="icon">
                <span>{{item.title}}</span>
            </div>
        </div>
    </div>
</template>

<script>
    const bg1 = require('@/assets/images/licang/header.png')
    const bg2 = require('@/assets/images/index/Title_bg_2.png')
    export default {
        components: {

        },
        data() {
            return {
                src: bg1,
                navs: [{ title: '整体概况', url: "/index/whole", img: require('@/assets/images/licang/icon/icon_nav_1@2x.png') },
                { title: '社区概况', url: "/index/community", img: require('@/assets/images/licang/icon/icon_nav_2@2x.png') },
                { title: '商业概况', url: "/index/business", img: require('@/assets/images/licang/icon/icon_nav_3@2x.png') },
                { title: '文旅概况', url: "/index/Cultural", img: require('@/assets/images/licang/icon/icon_nav_4@2x.png') },
                { title: '交通概况', url: "/index/traffic", img: require('@/assets/images/licang/icon/icon_nav_5@2x.png') }],
                path: '/index/whole'
            }
        },
        // 监听,当路由发生变化的时候执行
        watch: {
            $route: {
                handler: function (val, oldVal) {
                    this.path = val.path
                },
                // 深度观察监听
                deep: true,
                immediate: true,
            }
        },
        props: {
            title: {
                type: String,
                default: "城市数字经济大脑"
            },
            imageUrl: {
                type: String,
                default: ''
            },

        },

        created() {
            // // 默认首页用1 其他用2
            // if (this.$route.name === 'Index') {
            //     this.src = bg1
            // } else {
            //     this.src = bg2
            // }
            // // 如果需要自定义背景图
            // if (this.imageUrl) {
            //     this.src = this.imageUrl
            // }
        },
        mounted() { },
        methods: {
            to(url) {
                this.$router.replace(url)
            }
        },
    };
</script>
<style lang="scss" scoped>
    .header-box {
        width: 100%;
        height: 121px;
        /* padding-top: 20px; */
        position: relative;
        z-index: 10;

        img {
            width: 100%;
            height: 96px;
        }

        .icon {
            width: 25px;
            height: 25px;
            margin-right: 12px;
        }

        p {
            /* width: 673px;
            height: 43px; */
            font-size: 58px;
            /* font-family: PangMenZhengDao, PangMenZhengDao-Regular; */
            font-family: PingFang SC-Bold;
            font-weight: 400;
            text-align: left;
            padding-left: 40px;
            color: #ffffff;
            line-height: 24px;
            letter-spacing: 5px;
            width: 26%;
            height: 94px;
            position: absolute;
            top: 0px;
            line-height: 94px;

        }

        @media (max-width: 2600px) {
            p {
                font-size: 52px;
            }
        }

        .nav {
            width: 40%;
            height: 94px;

            position: absolute;
            top: 0px;
            right: 0;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            padding-right: 40px;

            .item {
                cursor: pointer;
                width: 270px;
                height: 70px;
                background-size: 100% 100%;
                background-image: url('../../assets/images/licang/TAB_n.png');
                position: relative;
                margin-left: -40px;
                span {
                    color: #ffffff;
                    font-size: 26px;
                    /* font-family: PingFang SC; */
                    font-weight: 400;
                }
            }

            .active {
                background-size: 100% 100%;
                background-image: url('../../assets/images/licang/TAB_h.png');
            }
        }
    }
</style>
